<template>
  <div id="app">
    <div id="header" class="clearfix">
      <div class="w">
        <div class="layui-col-md2">
          <a href="javascript:void(0);"><img src="../../assets/resturant.png" style="width: 60px;height: 60px;"></a>
          <span id="" style="font-size: 20px;font-weight: bold;">
							<a href="javascript:void(0);">吃了么？</a>
						</span>
        </div>
        <div class="layui-col-md5">
          <el-autocomplete v-model="state" :fetch-suggestions="querySearchAsync" placeholder="请输入内容" @select="handleSelect"></el-autocomplete>
          <a href="javascript:void(0);">
            <i class="layui-icon" style="font-size: 20px;">&#xe615;</i>
          </a>
        </div>
        <div class="layui-col-md5">

          <el-menu :default-active="activeIndex2" class="el-menu-demo" mode="horizontal" @select="handleSelect"
                   background-color="#23b8ff" text-color="#fff" active-text-color="#ffd04b">
            <el-menu-item index="1"><a href="#">登录/注册</a></el-menu-item>
            <el-submenu index="2">
              <template slot="title">我的服务</template>
              <el-menu-item index="2-1">开通VIP</el-menu-item>
              <el-menu-item index="2-2">联系客服</el-menu-item>
              <el-menu-item index="2-3">意见邮箱</el-menu-item>
              <el-submenu index="2-4">
                <template slot="title">免费开店</template>
                <el-menu-item index="2-4-1">成为商家</el-menu-item>
                <el-menu-item index="2-4-2">商家后台</el-menu-item>
                <el-menu-item index="2-4-3">合作规则</el-menu-item>
              </el-submenu>
            </el-submenu>
            <el-menu-item index="3" disabled>消息中心</el-menu-item>
            <el-menu-item index="4"><a href="https://www.ele.me" target="_blank">手机端</a></el-menu-item>
          </el-menu>
        </div>
      </div>
    </div>


    <!-- 主体部分 -->
    <div id="main1" class="clearfix" style="margin-top: 20px;">
      <div class="w">
        <el-carousel :interval="4000" type="card" height="200px">
          <el-carousel-item v-for="item in 6" :key="item">
            <h3 class="medium">{{ item }}</h3>
          </el-carousel-item>
        </el-carousel>
      </div>
    </div>
    <div class="" style="position: absolute;">
      <el-button @click="drawer = true" type="primary" style="margin-left: 16px;">
        我的信息
      </el-button>

      <el-drawer title="Hi~欢迎来到吃了么!" :visible.sync="drawer" :direction="direction" >
        <div style="height: 150px;background-color: #fff;border-radius: 26px;margin-bottom: 10px;padding: 5px 0;margin-left: 15px">
          <div class="layui-col-md3" style="margin-top: 50px;">
            <a href="javascript:void(0);"><i class="layui-icon" style="font-size:24px;">&#xe600;</i></a>
            <div >
              收藏
            </div>
          </div>
          <div class="layui-col-md3" style="margin-top: 50px;">
            <a href="javascript:void(0);"><i class="layui-icon" style="font-size:24px;">&#xe6b2;</i></a>
            <div >
              评价
            </div>
          </div>
          <div class="layui-col-md3" style="margin-top: 50px;">
            <a href="javascript:void(0);"><i class="layui-icon" style="font-size:24px;">&#xe60e;</i></a>
            <div >
              历史记录
            </div>
          </div>
          <div class="layui-col-md3" style="margin-top: 50px;">
            <a href="javascript:void(0);"><i class="layui-icon" style="font-size:24px;">&#xe626;</i></a>
            <div>
              客服
            </div>
          </div>
        </div>
        <div  style="height: 150px;background-color: #fff;border-radius: 26px;margin-bottom: 10px;padding: 5px 0;margin-left: 15px">
          <div class="layui-col-md3" style="margin-top: 50px;">
            <a href="javascript:void(0);"><i class="layui-icon" style="font-size:24px;">&#xe63c;</i></a>
            <div >
              我的订单
            </div>
          </div>
          <div class="layui-col-md3" style="margin-top: 50px;">
            <a href="javascript:void(0);"><i class="layui-icon" style="font-size:24px;">&#xe698;</i></a>
            <div >
              购物车
            </div>
          </div>
          <div class="layui-col-md3" style="margin-top: 50px;">
            <a href="javascript:void(0);"><i class="layui-icon" style="font-size:24px;">&#xe667;</i></a>
            <div >
              待评价
            </div>
          </div>
          <div class="layui-col-md3" style="margin-top: 50px;">
            <a href="javascript:void(0);"><i class="layui-icon" style="font-size:24px;">&#xe659;</i></a>
            <div >
              退款/售后
            </div>
          </div>
        </div>
        <div style="margin-top: 10px;">
          <el-carousel height="240px" direction="vertical" :autoplay="false">
            <el-carousel-item v-for="item in 4" :key="item.key">
            </el-carousel-item>
          </el-carousel>
        </div>
        <div style="margin-top: 15px;">
          <el-button type="primary"  @click="dialogVisible = true">支付设置</el-button>
        </div>
      </el-drawer>
    </div>
    <div id="main2">
      <div class="w">
        <el-tabs type="border-card">
          <el-tab-pane>
            <span slot="label"><i class="el-icon-star-off"></i> 猜你喜欢</span>
            猜你喜欢
          </el-tab-pane>
          <el-tab-pane label="今日特价">今日特价</el-tab-pane>
          <el-tab-pane label="发现好店">发现好店</el-tab-pane>
          <el-tab-pane label="吃了么优选">吃了么优选</el-tab-pane>
        </el-tabs>
      </div>
    </div>
    <div id="main3">
      <div class="w">
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="热门外卖" name="first">热门外卖</el-tab-pane>
          <el-tab-pane label="今日美食" name="second">今日美食</el-tab-pane>
          <el-tab-pane label="果蔬拼盘" name="third">果蔬拼盘</el-tab-pane>
          <el-tab-pane label="休闲/娱乐" name="fourth">休闲/娱乐</el-tab-pane>
        </el-tabs>
      </div>
    </div>

  </div>
</template>

<script>
  export default {
    name: "index",
    data() {
      return {
        drawer: false,
        direction: 'ltr',
        dialogVisible: false,

      };
    },
    methods: {

    }
  }
</script>

<style src="../public/layui/css/layui.css"></style>
<style scoped>
  /* 设置BFC */
  .clearfix::after,
  .clearfix::before {
    content: '';
    display: table;
    clear: both;
  }

  body {
    min-width: 1200px;
    /*设置最小宽度可避免颜色不能完全覆盖问题*/
    font: 12px/1.5 Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif;
    color: #666;
    background-color: #f5f6f7;
  }

  .w {

    width: 1200px;
    height: 100%;
    margin: 0 auto;

  }

  #header {
    background-color: #fff;
    line-height: 60px;
    text-align: center;

  }

  .el-autocomplete {
    width: 280px;
  }

  .el-menu {}

  #main1 {
    text-align: center;
  }

  /*轮播图设置*/
  .el-carousel__item h3 {
    color: #475669;
    font-size: 18px;
    opacity: 0.75;
    line-height: 300px;
    margin: 0;
  }

  .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
  }

  .el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
  }

  .index-login {
    background-color: #fff;
    margin-top: 10px;
    padding: 10px 0;
  }


  .el-drawer {
    background-color: #f5f6f7;
    text-align: center;

  }

  .el-tabs {
    height: 300px;
  }


  /*我的标签*/
  .el-tag+.el-tag {
    margin-left: 10px;
  }

  .button-new-tag {
    margin-left: 10px;
    height: 32px;
    line-height: 30px;
    padding-top: 0;
    padding-bottom: 0;
  }

  .input-new-tag {
    width: 90px;
    margin-left: 10px;
    vertical-align: bottom;
  }
</style>
